<route lang="json5" type="page">
{
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "white",
    navigationBarTitleText: "登录",
  },
}
</route>

<template>
  <view class="accountBox">
    <cu-login>
      <view>
        <uv-form ref="uForm" :model="loginForm" :rules="rules">
          <uv-form-item label="手机号" prop="contact" borderBottom labelWidth="160rpx">
            <uv-input
              v-model.number="loginForm.contact"
              placeholder="请输入手机号"
              font-size="31rpx"
              border="none"
              type="number"
              clearable
            />
          </uv-form-item>
          <uv-form-item
            label="密码"
            prop="password"
            borderBottom
            customStyle="margin-top:30rpx"
            labelWidth="160rpx"
          >
            <!-- :type="isLook ? 'text' : 'password'" -->

            <uv-input
              v-if="!isLook"
              type="password"
              v-model="loginForm.password"
              font-size="31rpx"
              placeholder="请输入密码"
              border="none"
              clearable
            >
              <template v-slot:suffix>
                <uv-icon
                  :name="isLook ? 'eye-off' : 'eye-fill'"
                  @click="isLook = !isLook"
                  size="24"
                ></uv-icon>
              </template>
            </uv-input>
            <uv-input
              v-else
              type="text"
              v-model="loginForm.password"
              placeholder="请输入密码"
              border="none"
              clearable
            >
              <template v-slot:suffix>
                <uv-icon
                  :name="isLook ? 'eye-off' : 'eye-fill'"
                  @click="isLook = !isLook"
                  size="24"
                ></uv-icon>
              </template>
            </uv-input>
          </uv-form-item>
          <uv-form-item
            label="食堂"
            prop="unitName"
            @click="showAction"
            borderBottom
            customStyle="margin-top:30rpx"
            labelWidth="160rpx"
          >
            <uv-input
              v-model="loginForm.unitName"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择食堂"
              font-size="31rpx"
              border="none"
            ></uv-input>
            <template v-slot:right>
              <uv-icon name="arrow-right"></uv-icon>
            </template>
          </uv-form-item>
          <uv-button
            shape="circle"
            color="#00754A"
            customStyle="margin-top: 77rpx;height:92rpx;"
            @click="loginHandler"
            :disabled="disabled"
          >
            <span style="font-size: 31rpx; font-weight: 600">登录</span>
          </uv-button>
        </uv-form>
        <uv-picker
          ref="selectRef"
          color="#000000"
          activeColor="#00754A"
          confirmColor="#00754A"
          :columns="[cookieList]"
          keyName="unitName"
          title="请选择食堂"
          round="15rpx"
          @confirm="cookieSelect"
        ></uv-picker>
      </view>
    </cu-login>

    <view class="bottomBox flex">
      <p @click="goRegister">新用户注册</p>
      <p class="color-#D4E9E2">|</p>
      <p @click="goVisitors">游客登录</p>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { login } from "@/service/business/login";
import { getCurrentInstance } from "vue";
import type { ComponentInternalInstance } from "vue";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

import { useUserStore } from "@/store";
const userStore = useUserStore();
//
const isLook = ref(false);
const loginOrgin = () => ({
  contact: "",
  password: "",
  unitCode: "",
  unitName: "",
});
const loginForm = ref(loginOrgin());

const rules = ref({
  contact: [
    {
      type: "number",
      required: true,
      message: "请填写手机号",
      trigger: ["blur", "change"],
    },
    {
      pattern: /^(0[0-9]{2,3}-[0-9]{7,8})$|^1[3456789][0-9]{9}$/,
      message: "手机号格式错误",
      trigger: ["blur"],
    },
  ],
  password: {
    type: "string",
    required: true,
    message: "请填写密码",
    trigger: ["blur"],
  },
  unitName: {
    type: "string",
    required: true,
    message: "请选择食堂",
    trigger: ["blur", "change"],
  },
});

const disabled = ref(true);

// 校验表单项放开按钮状态
watch(
  loginForm,
  () => {
    disabled.value = !Object.values(loginForm.value).every((el) => el != "");
  },
  { deep: true }
);

// 食堂列表
const cookieList = ref([]);

const selectRef = ref(null);
const showAction = () => {
  selectRef.value.open();
};

// 选择食堂
const cookieSelect = (e) => {
  const { unitCode, unitName } = e.value[0];
  loginForm.value.unitCode = unitCode;
  loginForm.value.unitName = unitName;
  userStore.setOrgVal({ unitCode, unitName });
};

// 账密登录
const loginHandler = () => {
  uForm.value
    .validate()
    .then((res) => {
      const { contact, password } = { ...loginForm.value };
      login({ contact, password }).then((res) => {
        if (res.retCode == 2000) {
          userStore.clearUserInfo();
          userStore.setUserInfo(res.data);
          uni.showToast({
            title: "登录成功",
            icon: "success",
          });
          userStore.setloginFormInfo({
            contact,
            password,
          });
          const { kitchenId } = userStore.userInfo.user;
          if (userStore.userInfo && kitchenId) {
            uni.switchTab({
              url: "/pages/home/index",
            });
          } else {
            uni.navigateTo({ url: "/packageOne/pages/register/userPrefer" });
          }
        }
      });
    })
    .catch((err) => {
      console.log(err, 888);
    });
};

// 跳转注册
const goRegister = () => {
  uni.navigateTo({ url: "/packageOne/pages/register/register" });
};

// 游客登录
const goVisitors = () => {
  if (!loginForm.value.unitCode) {
    uni.showToast({
      icon: "none",
      title: "请先选择食堂",
    });
    return false;
  }
  let parmas = {
    contact: "00000000000",
    password: "00000000000",
    type: 1,
  };
  login(parmas).then((res) => {
    if (res.retCode == 2000) {
      userStore.clearUserInfo();
      userStore.setUserInfo(res.data);
      uni.switchTab({
        url: "/pages/home/index",
      });
    }
  });
};

onMounted(() => {
  // 获取食堂列表
  proxy?.$global.getAllKitchen().then((res) => {
    cookieList.value = res;
    let idx = cookieList.value.findIndex(
      (el) => el.unitCode == userStore.pinia_org.unitCode
    );
    if (idx != -1) {
      loginForm.value.unitCode = cookieList.value[idx].unitCode;
      loginForm.value.unitName = cookieList.value[idx].unitName;
    } else {
      loginForm.value.unitCode = "";
      loginForm.value.unitName = "";
    }
  });
  // if (userStore.userInfo.user?.nickname == "匿名用户") {
  //   loginForm.value.contact = "";
  // } else {
  //   loginForm.value.contact = userStore.userInfo.user?.contact ?? "";
  // }
});

onShow(()=>{
  loginForm.value.contact = userStore.loginFormInfo.contact
  loginForm.value.password = userStore.loginFormInfo.password
})

const uForm = ref(null);
</script>

<style lang="scss" scoped>
::v-deep .uv-toolbar__confirm__wrapper{
  font-weight: bold
}
.accountBox {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #fff;
}

.bottomBox {
  font-weight: 400;
  font-size: 27rpx;
  color: #00754a;
  line-height: 42rpx;
  position: absolute;
  bottom: 80rpx;
  left: 50%;
  transform: translateX(-50%);
  & :nth-child(2) {
    margin: 0 30rpx;
  }
}
</style>
